<template>
  <div id="sceneview"></div>
</template>
  <script>
import { loadModules } from "esri-loader";
// import {mounted} from "vue"
export default {
  name: "App",
  components: {},
  methods: {
    _createSceneview: function () {
      let option = {
        url: "https://js.arcgis.com/4.27/",
        css: "https://js.arcgis.com/4.27/esri/themes/light/main.css",
      };
      loadModules(
        [
          "esri/Map",
          "esri/views/SceneView",
          "esri/layers/WebTileLayer",
          "esri/layers/MapImageLayer",
        ],
        option
      ).then(([Map, SceneView, WebTileLayer, MapImageLayer]) => {
        let map = new Map({
          ground: "world-elevation",
        });
        const tk = "bbc7cd9cdc82bd60c2ce5cfa3c50fbb6"; // 天地图秘钥
        let baseLayer_vec = new WebTileLayer({
          urlTemplate: `http://t{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=${tk}`,
          subDomains: [0, 1, 2, 3, 4, 5, 6, 7],
        });
        let baseLayer_cva = new WebTileLayer({
          urlTemplate: `http://t{subDomain}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=${tk}`,
          subDomains: [0, 1, 2, 3, 4, 5, 6, 7],
        });
        map.add(baseLayer_vec);
        map.add(baseLayer_cva);

        let view = new SceneView({
          container: "sceneview", // Reference to the DOM node that will contain the view
          map: map, // References the map object created in step 3
          zoom: 12, // Sets zoom level based on level of detail (LOD)
          center: [113.2, 22.8],
        });
        let layer = new MapImageLayer({
          url: "http://192.168.0.100:6080/arcgis/rest/services/sd_district/MapServer",
        });
        map.add(layer);

        view.ui.components = [];
        //view.ui.remove('attribution')//清楚底部powered by ESRI
        // console.log(view);
      });
    },
  },

  mounted: function () {
    this._createSceneview();
  },
};
</script>
  <style>
#sceneview {
  position: absolute;
  width: 100%;
  height: 100%;
  /* color: rgb(255, 255, 255); */
}
</style>
    